<template>
  <view class="container">
		<nav-ber :title="'视频专区'" :bgColor="'#f7f8ff'"></nav-ber>
		<view style="font-weight: 600;font-size: 40rpx;margin: 10rpx 0;">
			{{ datas.name }}
		</view>
		<view style="margin: 20rpx 0;display: flex;justify-content: space-between;color: gray;">
			<view>
				作者： {{ datas.updateBy }}
			</view>
			<view>{{ datas.createTime }}</view>
		</view>
		<view style="margin-top: 25rpx;width: 100%;"  class="section" v-if="datas.url">
			<video @loadedmetadata="getLength" :controls="bool" style="width: 100%;" :src="datas.url" 	:enable-progress-gesture="false">
				<cover-view class='cover3' ></cover-view>
			</video>
		</view>
  </view>
</template>
<script>
	import { resourceById, set_video_time, studyLog, resourceRead } from '@/api/task.js'
  export default {
    data() {
			return {
				bool: true,
				datas: '',
				timer: null,
				i: 0,
				time: null,
				videoTime: 0,
			}
    },
		onLoad(option) {
			resourceRead(option.id).then()
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
			this.set_video_timeFun()
			if (option.id) {
				this.resourceListFun(option.id)
			}
			
			this.timer = setInterval(() =>{
				++this.i
				if (this.videoTime == this.i) {
					// console.log('视频时长触发触发')
					this.studyLogFun(option.id)
					clearInterval(this.timer);
					this.timer = null;
				} else {
					if (+this.time <= this.i) {
						// alert('a')
						// console.log('字典触发')
						this.studyLogFun(option.id)
						clearInterval(this.timer);
						this.timer = null;
					}
				}
				
			},1000)
		},
		onUnload() {
			if(this.timer) {  
					clearInterval(this.timer);  
					this.timer = null;  
			}  
		},
		methods: {
			// 完成一次观看视频的记录
			studyLogFun(id) {
				studyLog({
					number: 1,
					researchId: id
				}).then((res) => {
					// 观看成功
				})
			},
			getLength(e) {
			    e.detail.duration = parseInt(e.detail.duration)
			    //处理时间格式并存放到data中
					this.videoTime = e.detail.duration
			},
			set_video_timeFun() {
				set_video_time().then((res) => {
					this.time = res.data[0].dictValue
				})
			},
			resourceListFun(id) {
				this.resourceLists = []
				resourceById(id).then((res) => {
					this.datas = res.data
					// this.resourceLists = res.rows
				})
			},
			goTovixFun(type) {
				// uni.navigateTo({
				// 	url:type == 1? "/pages/task/researchTask/index" : "/pages/task/visitTask/index"
				// })
			},
			proFun(val) {
				this.ispro = val
			},
		}
  }
</script>
<style lang="scss" scoped>
	.sea_pad {
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.container {
		background-color: #f7f8ff;
		// background-color: #fff;
		display: flex;
		flex-direction: column;
		height: 100vh;
		overflow: hidden;
		padding: 20rpx;
		box-sizing: border-box;
	}
	.section {
		position: relative;
	}
	.cover3 {
		position: absolute;
		bottom: 0px;
		z-index: 998;
		height: 20%;
		left: 60px; //- 左边60px不遮罩，用户仍可点击播放暂停
		width: 70%;//- 右边留出一点，用户仍可点击全屏、退出全屏
	}
	    
</style>
